<html>

<body>
  <ul>
    <li>
      <svg aria-hidden="true" focusable="false" role="img" class="octicon octicon-copy" viewBox="0 0 16 16" width="16"
        height="16" fill="currentColor">
        <path
          d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z">
        </path>
        <path
          d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z">
        </path>
      </svg>
      <button id="copy_docx_as_markdown" data-locale="copy_docx_as_markdown">Copy as
        Markdown</button>
    </li>
    <li>
      <svg aria-hidden="true" focusable="false" role="img" class="octicon octicon-download" viewBox="0 0 16 16"
        width="16" height="16" fill="currentColor">
        <path
          d="M2.75 14A1.75 1.75 0 0 1 1 12.25v-2.5a.75.75 0 0 1 1.5 0v2.5c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25v-2.5a.75.75 0 0 1 1.5 0v2.5A1.75 1.75 0 0 1 13.25 14Z">
        </path>
        <path
          d="M7.25 7.689V2a.75.75 0 0 1 1.5 0v5.689l1.97-1.969a.749.749 0 1 1 1.06 1.06l-3.25 3.25a.749.749 0 0 1-1.06 0L4.22 6.78a.749.749 0 1 1 1.06-1.06l1.97 1.969Z">
        </path>
      </svg>
      <button id="download_docx_as_markdown" data-locale="download_docx_as_markdown">Download as
        Markdown</button>
    </li>
    <li>
      <svg aria-hidden="true" focusable="false" role="img" class="octicon octicon-issue-opened" viewBox="0 0 16 16"
        width="16" height="16" fill="currentColor">
        <path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path>
        <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"></path>
      </svg>
      <a href="https://github.com/whale4113/cloud-document-converter" target="_blank"
        data-locale="help_and_feedback">Help and Feedback</a>
    </li>
  </ul>
  <style>
    :root {
      --background-primary: #ffffff;
      --text-primary: rgb(31, 31, 31);
    }

    @media (prefers-color-scheme: dark) {
      :root {
        --background-primary: rgb(32, 33, 36);
        --text-primary: rgb(227, 227, 227);
      }
    }

    .octicon {
      margin-right: 8px;

      display: inline-block;
      user-select: none;
      vertical-align: text-bottom;
      overflow: visible
    }

    :root,
    body {
      width: max-content;
      height: max-content;
    }

    body {
      padding-right: 60px;
      margin: 0px;
      background-color: var(--background-primary);
      font-size: 16px;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    }

    ul {
      list-style: none;
      padding: 8px;
      margin: 0px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: start;
    }

    li {
      padding: 4px;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
    }

    li>svg {
      fill: var(--text-primary);
    }

    a {
      text-decoration: none;
      font-size: 14px;
      line-height: 20px;
      color: var(--text-primary);
    }

    button {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding: 0px;
      margin: 0px;
      font-size: 14px;
      line-height: 20px;
      color: var(--text-primary);
      border-width: 0px;
      background-color: transparent;
      cursor: pointer;
    }
  </style>
  <script src="popup.js"></script>
</body>

</html>